/*!
 _________
|   🤹‍♀️   |\
| ~~~~~~~ |_\
|  common |
| ~~~~~~~ |
| ~~~~~~~ |
|_________|
*/
@import './_prefix.less';
page {
    /* 
     ______________
    | 初始化页面样式 |
    |_____________|
    */
    background-color: var(--ghost-white);
    font-size: 28rpx;
    color: var(--black);
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}
/* bgColor && text-color */
@colorType: null, dark, disabled, light;
@colors: red, fusion-red, orange, fusion-orange, yellow, fusion-yellow, olive,
    fusion-olive, green, fusion-green, blue-green, fusion-blue-green, cyan,
    fusion-cyan, sky-blue, fusion-sky-blue, blue, fusion-blue, purple,
    fusion-purple, mauve, fusion-mauve, pink, fusion-pink, brown, fusion-brown,
    blue-grey, fusion-blue-grey;

.colorType(@colorType);
.colorType(@colorType, @i: 1) when (length(@colorType) >= @i) {
    @typeName: extract(@colorType, @i);
    .color(@colors);
    .color(@colors, @j: 1) when (length(@colors) >= @j) {
        @name: extract(@colors, @j);
        .bgType(@typeName);
        // 判断是否是占位符
        .bgType(@typeName) when not( @typeName = null) {
            .bg-@{typeName}-@{name} {
                background-color: var(~'--@{typeName}-@{name}');
            }
        }
        .bgType(@typeName) when ( @typeName = null) {
            .bg-@{name} {
                background-color: var(~'--@{name}');
            }
        }
        .textType(@typeName);
       // 判断是否是占位符
        .textType(@typeName) when not( @typeName = null) {
            .text-@{typeName}-@{name},
            button[disabled].@{prefix}-btn[class*="line"].text-@{typeName}-@{name} {
                color: var(~'--@{typeName}-@{name}');
            }
        }
        .textType(@typeName) when ( @typeName = null) {
            .text-@{name},
            button[disabled].@{prefix}-btn[class*="line"].text-@{name} {
                color: var(~'--@{name}');
            }
        }
        .color(@colors, (@j + 1));
    }
    .colorType(@colorType, (@i + 1));
}

/* 不正经黑色 */
.bg-black {
    background-color: var(--black);
}
/* 暗灰色 */
.bg-dark-gray {
    background-color: var(--dark-gray);
}
/* 灰色 */
.bg-gray {
    background-color: var(--gray);
}
/* 烟灰色 */
.bg-grey {
    background-color: var(--grey);
}

/* 魂白背景 */
.bg-ghost-white {
    background-color: var(--ghost-white);
    color: var(--dark-gray);
}

/* 白色背景 */
.bg-white {
    background-color: var(--white);
    color: var(--dark-gray);
}

/* 透明 */
.bg-transparent {
    background-image: var(--transparent);
    color: var(--dark-gray);
}

/* 不正经黑色 */
.text-black {
    color: var(--black);
}
button[disabled].@{prefix}-btn[class*="line"].text-black {
    color: var(--black);
}
/* 暗灰色 */
.text-dark-gray {
    color: var(--dark-gray);
}
button[disabled].@{prefix}-btn[class*="line"].text-dark-gray {
    color: var(--dark-gray);
}
/* 烟灰色 */
.text-grey {
    color: var(--grey);
}
button[disabled].@{prefix}-btn[class*="line"].text-grey {
    color: var(--grey);
}
/* 灰色 */
.text-gray {
    color: var(--gray);
}
button[disabled].@{prefix}-btn[class*="line"].text-gray {
    color: var(--gray);
}
/* 魂白 */
.text-ghost-white {
    color: var(--ghost-white);
}
/* 白色 */
.text-white {
    color: var(--white);
}
// 透明色
.text-transparent {
    color: var(--transparent);
}

/* box-shadow && text-shadow */
@shadowColors: red, fusion-red, orange, fusion-orange, yellow, fusion-yellow,
    olive, fusion-olive, green, fusion-green, blue-green, fusion-blue-green,
    cyan, fusion-cyan, sky-blue, fusion-sky-blue, blue, fusion-blue, purple,
    fusion-purple, mauve, fusion-mauve, pink, fusion-pink, brown, fusion-brown,
    blue-grey, fusion-blue-grey, black, gray, dark-gray, grey, white;

.shadowColor(@shadowColors);
.shadowColor(@shadowColors, @i: 1) when (length(@shadowColors) >= @i) {
    @name: extract(@shadowColors, @i);
    .shadow-@{name} {
        box-shadow: var(--shadow-size) var(~'--shadow-@{name}');
    }
    .shadow-text-@{name} {
        text-shadow: var(--shadow-size) var(~'--shadow-@{name}');
    }
    .shadowColor(@shadowColors, (@i + 1));
}
/* 曲线阴影 */
.shadow-curve {
    position: relative;
    background: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
    &:after {
        content: '';
        position: absolute;
        background: transparent;
        top: 50%; // 设置宽高仅仅设置上下左右边距是为了让系统自动定位
        bottom: 2rpx;
        left: 10rpx;
        right: 10rpx;
        z-index: -1; //将副阴影置于主阴影下
        box-shadow: 0 0 20rpx rgba(0, 0, 0, .6);
        border-radius: 100rpx / 10rpx;
    }
}
/* 翘边阴影 */
.shadow-warped-edge {
    position: relative;
    background: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
    &:before,
    &:after {
        content: '';
        width: 50%;
        position: absolute;
        top: 20rpx;
        bottom: 30rpx;
        left: 20rpx;
        z-index: -1;
        box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, .2);
        transform: rotate(-3deg);
    }
    &:after {
        right: 20rpx;
        left: auto;
        transform: rotate(3deg);
    }
}
.shadow-img-blur {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    &::before {
        content: '';
        background: inherit;
        filter: blur(10rpx);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 10rpx;
        left: 10rpx;
        z-index: -1;
        opacity: .4;
        transform-origin: 0 0;
        border-radius: inherit;
        transform: scale(1, 1);
    }
}
.shadow-perspective {
    position: relative;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, .3), 0 0 40rpx rgba(0, 0, 0, .1) inset;
    &::before {
        content: '';
        position: absolute;
        z-index: -1;
        left: 80rpx;
        bottom: 6rpx;
        width: 50%;
        height: 35%;
        max-width: 200rpx;
        box-shadow: -80rpx 0 8rpx rgba(0, 0, 0, .4);
        transform: skew(50deg);
        transform-origin: 0 100%;
    }
}

/*
 __________
| ~~~~~~~~~|\
| 渐变背景色 |_\
| ~~~~~~~~ |
| ~~~~~~~~ |
|__________|
*/

@gradualColors: red, orange, yellow, olive, green, blue-green, cyan, sky-blue,
    blue, purple, light-purple, pink, mauve, brown, blue-grey;

.gradualColor(@gradualColors);
.gradualColor(@gradualColors, @i: 1) when (length(@gradualColors) >= @i) {
    @name: extract(@gradualColors, @i);
    .bg-gradual-@{name} {
        background-image: var(~'--gradual-@{name}');
    }
    .gradualColor(@gradualColors, (@i + 1));
}
.right-arrow {
    position: relative;
    &::after {
        content: '\e744';
        font-family: ani-icon;
        position: absolute;
        font-size: 28rpx;
        right: 30rpx;
        color: var(--fusion-blue-grey);
    }
}
